<template>
  <div class="myProfile">
    <!-- 调用header.vue -->
    <myHeader goBack='true' :headTitle="profiletitle"></myHeader>
    <section>
      <section class="profile-number">
        <router-link :to="storeUser.isLoginSucc ? '/profile/info' : '/login'" class="profile-link">
          <img :src="storeUser.avatar" class="privateImage" v-if="storeUser.user_id">
          <span class="privateImage" v-else>
            <svg class="privateImage-svg">
              <!-- use元素在SVG文档内取得目标节点，并在别的地方复制它们 -->
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
            </svg>
          </span>
          <div class="user-info">
            <p>{{username}}</p>
            <p>
              <span class="user-icon">
                <svg class="icon-mobile" fill="#fff">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mobile"></use>
                </svg>
              </span>
              <span class="icon-mobile-number">{{mobile}}</span>
            </p>
          </div>
          <span class="arrow">
            <svg class="arrow-svg" fill="#fff">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </span>
        </router-link>
      </section>
      <section class="info-data">
        <ul class="clear">
          <!-- <router-link :to="isLoginSucc ? '/balance' : '/login' " tag="li" class="info-data-link"> -->
          <router-link to="/balance" tag="li" class="info-data-link">
            <span class="info-data-top" v-cloak><b>{{acctBal}}</b>元</span>
            <span class="info-data-bottom">余额</span>
          </router-link>
          <router-link to="/points" tag="li" class="info-data-link">
            <span class="info-data-top" v-cloak><b>{{pointNumber}}</b>分</span>
            <span class="info-data-bottom">积分</span>
          </router-link>
          <router-link to="/benefit" tag="li" class="info-data-link">
            <span class="info-data-top" v-cloak><b>{{couponCnt}}</b>个</span>
            <span class="info-data-bottom">优惠</span>
          </router-link>
        </ul>
      </section>
      <!-- <p class="footprint">爱生活</p> -->
      <section class="profile-1reTe">
        <router-link :to="{path: 'rent', query:{userId: storeUser.id}}" class="myrent">
          <aside>
            <svg fill="#4aa5f0">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order"></use>
            </svg>
          </aside>
          <div class="myrent-div">
            <span>我要交房租</span>
            <span class="myrent-divsvg">
              <svg fill="#bbb">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </router-link>
        <router-link :to="{path: '/rent/contract', query:{userId: storeUser.id}}" class="myrent">
          <aside>
            <svg fill="#4aa5f0">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order"></use>
            </svg>
          </aside>
          <div class="myrent-div">
            <span>交房租-我的合同</span>
            <span class="myrent-divsvg">
              <svg fill="#bbb">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </router-link>
      </section>
    </section>
    <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
    <myFootGuide></myFootGuide>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import myHeader from '@/components/common/header/header'
  import myFootGuide from '@/components/common/footer/footGuide'
  import alertTip from '@/components/common/alertTip'
  export default {
  data(){
    return{
      profiletitle: '我的v180511',
      username: '登录/注册',           // 用户名
      resetname: '',
      mobile: '暂无绑定手机号',             //电话号码
      balance: 0,            //我的余额
      count : 0,             //优惠券个数
      pointNumber : 0,       //积分数
      avatar: '',             //头像地址
      // imgBaseUrl,
      showAlert: false,      //显示提示组件
      alertText: null,       //提示的内容
      custId: null
    }
  },
  mounted() {   // vue实例挂载后进行初始化
    if (!this.hasAuthCode) {
      this.$store.dispatch('getAuthCode').then(() => {   // 无法通过then获取正确的异步结果
        // console.log("isActRet:", this.isActRet, "hasAuthCode", this.hasAuthCode);
      });
    }
    // 异步获取用户账户信息
    // console.log("this.acctNum:", this.acctNum);
    // if (-2 == this.acctNum) {
    //   this.$store.dispatch('getAcct', {"custId": "13918831371", "acctTpBiz": "C010"});
    // }
    // if (this.storeUser.isLoginSucc) {
    //   console.log("dispatch-getAcct:", this.storeUser.id);
    //   this.$store.dispatch('getAcct', {"custId": this.storeUser.id, "acctTpBiz": "C010"});
    // }
    // 异步获取用户优惠券信息
    // if (!this.hasCoupon) 
    // {
    //   console.log("dispatch-getCoupons:", this.storeUser.id);
    //   this.$store.dispatch('getCoupons', "13918831371");
    // }
    this.initData();
  },
  components:{
    myHeader,
    myFootGuide,
    alertTip
  },
  computed: {
    ...mapGetters([
      'storeUser',
      'loginErrmsg',
      'hasAuthCode',
      'authCode',
      'hasAuthToken',
      'acctInf',
      'acctNum',
      'coupons',
      'hasCoupon'
    ]),
    acctBal: function() {
      return this.acctInf === null ? 0.00 : (this.acctInf.acctBal/100).toFixed(2);
    },
    couponCnt: function (){
      return this.coupons === null ? 0 : this.coupons.length;
    },
  },
  methods: {
    initData() {
      if (this.storeUser.isLoginSucc) {
        this.username = this.storeUser.name;
        // this.mobile = this.user.mobile || '暂无绑定手机号';
      } else {
        this.username = '登录/注册';
        // this.mobile = '暂无绑定手机号';
      }
    },
    closeTip() {
      this.showAlert = false;
    },
  }
}
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';
  .myProfile {
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .profile-number {
    padding-top:1.95rem;
    .profile-link{
      display:block;
      display:flex;
      box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background:$blue;
      padding: .666667rem .6rem;
      .privateImage{
          display:inline-block;
          @include wh(2.5rem,2.5rem);
          border-radius:50%;
          vertical-align:middle;
          .privateImage-svg{
              background:$fc;
              border-radius:50%;
              @include wh(2.5rem,2.5rem);
          }
      }
      .user-info{
          margin-left:.48rem;
          -webkit-box-flex: 1;
          -ms-flex-positive: 1;
          flex-grow: 1;
          p{
              font-weight:700;
              @include sc(.8rem,$fc);
              .user-icon{
                  @include wh(0.5rem,0.75rem);
                  display:inline-block;
                  vertical-align:middle;
                  line-height:0.75rem;
                  .icon-mobile{
                      @include wh(100%,100%);
                  }
              }
              .icon-mobile-number{
                  display:inline-block;
                  @include sc(.57333rem,$fc);
              }
          }
      }
      .arrow{
          @include wh(.46667rem,.98rem);
          display:inline-block;
          svg{
             @include wh(100%,100%);
          }
      }
    }
  }
  .info-data {
      width:100%;
      background:$fc;
      box-sizing: border-box;
      ul{
          .info-data-link{
              float:left;
              width:33.33%;
              display:inline-block;
              border-right:1px solid #f1f1f1;
              span{
                  display:block;
                  width:100%;
                  text-align:center;
              }
              .info-data-top{
                  @include sc(.55rem,#333);
                  padding: .853333rem 0 .453333rem;
                  b{
                      display:inline-block;
                      @include sc(1.0rem,#f90);
                      font-weight:700;
                      line-height:1rem;
                      font-family: Helvetica Neue,Tahoma;
                  }
              }
              .info-data-bottom{
                  @include sc(.57333rem,#666);
                  font-weight:400;
                  padding-bottom:.453333rem;

              }
          }
          .info-data-link:nth-of-type(2){
              .info-data-top{
                  b{
                      color:#ff5f3e;
                  }
              }

          }
          .info-data-link:nth-of-type(3){
              border:0;
              .info-data-top{
                  b{
                      color:#6ac20b;
                  }
              }
          }
      }
  }
  .footprint{
      margin-top:.2rem;
      padding:.2rem .4rem;
      @include sc(.5rem,#666);
  }
 .profile-1reTe{
    margin-top:.4rem;
    background:$fc;
    .myrent{
        padding-left:1.6rem;
        display:flex;
        align-items: center;
        aside{
            @include wh(.7rem,.7rem);
            margin-left:-.866667rem;
            margin-right:.266667rem;
            display:flex;
            align-items: center;
            svg{
                @include wh(100%,100%);
            }
        }
        .myrent-div{
            width:100%;
            border-bottom:1px solid #f1f1f1;
            padding:.433333rem .266667rem .433333rem 0;
            @include sc(.7rem,#333);
            display:flex;
            justify-content:space-between;
            span{
                display:block;
            }
            .myrent-divsvg{
                @include wh(.46667rem,.466667rem);
                svg{
                    @include wh(100%,100%);
                }
            }
        }
    }
    .myrent:nth-of-type(3) .myrent-div{
        border:0;
    }
  }
  .router-slid-enter-active, .router-slid-leave-active {
      transition: all .4s;
  }
  .router-slid-enter, .router-slid-leave-active {
      transform: translate3d(2rem, 0, 0);
      opacity: 0;
  }
</style>
